<template>
    <div class="positionR">
        <img class="bg-transparent" width="100%" height="100%" src="../../../assets/images/common/bg_transparent.png" />
        <div id="qrCode"></div>
    </div>
</template>

<script>
    import  QRCode from 'qrcodejs2'
    export default {
        name: "QrCode",
        props:{
            qrCodeProp:Object
        },
        data(){
            return{
                qrCode:{
                    width: 100,
                    height: 100,
                    content:'',
                    img:'',
                }
            }
        },
        mounted(){
            let that = this;
            this.qrCode = Object.assign({},this.qrCode,this.qrCodeProp)
            /*二维码*/
            new QRCode('qrCode',{
                render: "div",
                correctLevel: 0,
                width: that.qrCode.width,
                height: that.qrCode.height,
                text: that.qrCode.content,
                src: that.qrCode.img,
            })
        },
        watch:{
            qrCodeProp(val){
                this.qrCode = Object.assign({},this.qrCode,val)
            }
        }
    }
</script>

<style scoped>
    .bg-transparent{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
</style>